<template>
	<div style="padding: 3vw;">
		<van-nav-bar title="订单信息" />
		<div style="margin-top: 2vh;">

			<el-card>
				<template #header>
					<div>
						<span><strong>
								{{data.title}}
							</strong>
						</span>
					</div>
				</template>
				{{data.context}}
			</el-card>
		</div>
		<div style="margin:2vh">
			<div>
				<strong>订单编号：</strong>
				{{data.id}}
			</div>
			<div style="margin-top: 1vh;"><strong>订单状态：</strong>{{payStatu}}</div>
			<div style="margin-top: 1vh;"><strong>创建时间：</strong>{{data.startTime}}</div>
		</div>
		<van-divider style="color: purple; borderColor: purple" />
		<div style="text-align: right; font-size: 4vh; color: red; margin-right: 2vh;">&yen;{{priceShow}}</div>
		<van-divider style="color: purple; borderColor: purple" />
		<div style="text-align: right; margin-right: 2vh;">
			<el-link type="info" :underline="false" style="margin-right: 2vh;">取消订单</el-link>
			<van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="show=true" round>
				立即支付
			</van-button>
			<van-action-sheet v-model:show="show" :actions="payWays" cancel-text="取消" close-on-click-action
				description="请选择支付方式" @select="pay" />
		</div>
		<van-popup v-model:show="payPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left" lazy-render>
			<PayPage :price='priceShow' userName='锦江帮帮' name='劳动补贴' :close="close" :url="resurl" :data="orderOffers"></PayPage>
		</van-popup>
	</div>
</template>

<script>
	import PayPage from './PayPage.vue'
	import {
		showLoadingToast
	} from 'vant';
	import {
		showNotify
	} from 'vant';
	import {
		ref
	} from 'vue';
	import url from '@/assets/url.json';
	export default {
		components: {
			PayPage
		},
		props: {
			orderOffer:{},
			data: Object,
			treatedData: Object,
			close:Function
		},
		data() {
			return {
				resurl:url.ip+'/api-offer/order/payFromApi',
				payPageShow: false,
				priceShow: '',
				payWay: '钱包支付',
				wechatPayPageShow: false,
				orderOffers:{
				},
				payStatu:''
			}
		},
		mounted() {
			this.priceChange(this.data.price);
			this.payStatu = this.payStatus();
			this.$axios({
				url:url.ip+"/api-user/user/id?id="+this.data.uid,
				method:'GET',
				headers: {
					token: this.$cookies.get('token')
			}
			}).then((res)=>{
				if(res.data.code!=0){
					showNotify({
						type: 'danger',
						message: res.data.message
					});
				}else{
					this.orderOffers = this.orderOffer
					this.orderOffers.user=res.data.data[0]
					this.orderOffers.user.userName = "锦江帮帮"
					this.orderOffers.money = this.priceShow
				}
			})
		},

		setup() {
			const show = ref(false);
			const payWays = [{
					name: '微信支付',
					label: 'wechat'
				},
				{
					name: '钱包支付',
					label: 'wallet'
				}
			];

			return {
				show,
				payWays,
			};
		},

		methods: {
			priceChange(str) {
				if (str === '') {
					this.priceShow = '000';
				} else {
					let tn = Number.parseInt(str);
					if (tn < 10) {
						this.priceShow = "00" + this.priceShow;
					} else {
						if (tn < 10) {
							this.priceShow = "0" + this.priceShow;
						}
					}
				}
				this.priceShow = str.slice(0, -2) + "." + str.slice(-2);
			},

			pay(payName) {
				console.log(payName);
				switch (payName.label) {
					case 'wechat':
						showLoadingToast({
							message: '加载中...',
							forbidClick: true,
						});
						setTimeout(() => {
							this.payPageShow = true
						}, 2000);


						break;
					case 'wallet':
						showLoadingToast({
							message: '支付中...',
							forbidClick: true,
						});
						setTimeout(() => {
							this.$axios({
								url:url.ip+"/api-offer/order/payFromWallet?oid="+this.orderOffers.id,
								method:'GET',
								headers: {
									token: this.$cookies.get('token')
							}
							}).then((res)=>{
								if(res.data.code!==0){
									showNotify({
										type: 'danger',
										message: res.data.message
									});
									this.close();
								}else{
									showNotify({
										type: 'success',
										message: "支付成功"
									});
								}
							})
						}, 2000);
						break;
				}
			},
			payStatus() {
				switch (this.data.status) {
					case 1:
						return '未支付';
					case 2:
						return '已支付';
					case 3:
						return '已被接单';
					case 4:
						return '已结束';
				}
				return '未知状态';
			}
		}
	};
</script>

<style>
	.head {
		text-align: center;
		font-size: 4vh;
		font-weight: 700;
	}
</style>